<template>
  <div class="produce">
    <div class="product-header">
      <div class="product-header-inner">
        <img class="company-logo" src="../../../styles/logo.svg" alt="" />
        <div class="product-header-content">
          <div
            class="department_select"
            :class="showTree ? 'active' : ''"
            @click="showTreeFn(true)"
          >
            <p class="department_name">{{ curDepartment.departmentName }}</p>
            <iconSvg
              name="downFill"
              w="23px"
              height="13px"
              class="selece_icon"
              ref="selece_icon"
            ></iconSvg>
          </div>
          <transition name="slide">
            <div class="dep_box" v-show="showTree">
              <dep-tree
                @showTreeFn="showTreeFn"
                @initCurDepartment="initCurDepartment"
                :initDepartment="curDepartment"
              ></dep-tree>
            </div>
          </transition>
          <div
            v-if="showTree"
            @click="showTreeFn(false)"
            style="
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              z-index: 9;
            "
          ></div>
        </div>
        <div @click="backToHomepage" v-focusable><iconSvg name="home" w="20px" h="22px" class="home"></iconSvg></div>
      </div>
    </div>
    <Application></Application>
    <div class="produce-tab">
      <div
        class="produce-tab-item"
        @click="handler(1)"
        :class="statusIndex === 1 ? 'active' : ''"
      >
        <span>生产统计</span>
        <div class="line"></div>
      </div>
      <div
        class="produce-tab-item"
        @click="handler(2)"
        :class="statusIndex === 2 ? 'active' : ''"
      >
        <span>生产数据</span>
        <div class="line"></div>
      </div>
      <div
        class="produce-tab-item"
        @click="handler(3)"
        :class="statusIndex === 3 ? 'active' : ''"
      >
        <span>生产日报</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="produce-data-list">
      <div
        class="item"
        v-for="(item, index) in produceDataList"
        :key="index"
        @click="handleDetail(item)"
      >
        <div class="top">
          <span>{{ item.title }}</span>
        </div>
        <div class="bottom">{{ item.desc }}</div>
        <!-- <div class="status" :class="item.status === 1 ? 'draft' : 'submitted'">{{item.statusStr}}</div> -->
      </div>
      <div class="item no-data" v-if="produceDataList.length === 0">
        --暂无数据--
      </div>
    </div>
    <div class="more" v-if="showMore" @click="getMore">查看更多</div>
  </div>
</template>

<script>
import ProduceDataDao from "@/daos/produce_data_dao";
import depTree from "@/components/common/tree";
import Application from "@/components/common/application";
// import { Tab, TabItem } from 'vux'
const defaultFilterCache = {
  curDepartment: {},
  deviceTypeId: null
};
export default {
  name: "produceData",
  data() {
    return {
      statusIndex: 3,
      produceDataList: [],
      depId: "",
      depName: "",
      showMore: false,
      pageNum: 1,
      pageSize: 10,
      showTree: false,
      curDepartment: {
        id: "",
        departmentName: ""
      },
      departmentId: ""
    };
  },

  components: {
    Application,
    depTree
  },
  inject: ["backToHomepage"],

  // computed: {
  //   user() {
  //     if (!this.$store.state.user) {
  //       this.$store.commit(
  //         "saveUser",
  //         JSON.parse(localStorage.getItem("user"))
  //       );
  //     }
  //     return this.$store.state.user;
  //   }
  // },

  created() {
    this.filterCache = JSON.parse(localStorage.getItem("filterCache"));
    if (!this.filterCache) {
      this.filterCache = defaultFilterCache;
      localStorage.setItem("filterCache", JSON.stringify(this.filterCache));
    } else {
      this.curDepartment = this.filterCache.curDepartment;
    }
    // this.getData()
    this.getUser();
  },

  methods: {
    getUser() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.user = res;
      });
    },
    getData() {
      this.$vux.loading.show({
        text: "Loading"
      });
      ProduceDataDao.getDailyReportList(
        {
          orgId: this.$store.state.user.org.id,
          departmentId: this.departmentId,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        res => {
          this.$vux.loading.hide();
          if (this.pageNum === 1) {
            this.produceDataList.splice(0, this.produceDataList.length);
          }
          if (res.content && res.content.length) {
            this.produceDataList.push(...res.content);
          }
          this.showMore = !(!res.totalPages || this.pageNum === res.totalPages);
        },
        () => {
          this.$vux.loading.hide();
        }
      );
    },
    departmentSelected(params) {
      this.depId = params.department.id;
      this.depName = params.department.departmentName;
      this.needClearChart = true;
      this.curDepartment = params.department;
      this.lineChartOptions = {};
      if (
        !this.loading &&
        (!this.lineChartOptions ||
          !this.lineChartOptions.times ||
          this.lineChartOptions.times.length <= 0)
      ) {
        this.loading = true;
      }
      if (this.chartType !== 1) {
        this.produceDataList = [];
        this.getData();
      }
    },
    handler(value) {
      if (value === 1) {
        this.$router.push({
          path: "/produce",
          query: this.$route.query
        });
      }
      if (value === 2) {
        this.$router.push({
          path: "/produceData",
          name: "produceData",
          query: this.$route.query
        });
      }
    },
    handleDetail(data) {
      this.$router.push({
        path: "/produce/dailyreport",
        query: {
          id: data.id
        }
      });
    },
    getMore() {
      this.pageNum++;
      this.getData();
    },
    change(id, departmentName) {
      this.curDepartment.id = id;
      this.departmentId = id;
      this.curDepartment.departmentName = departmentName;
      let filterCache = JSON.parse(localStorage.getItem("filterCache"));
      filterCache.curDepartment = this.curDepartment;
      localStorage.setItem("filterCache", JSON.stringify(filterCache));
      this.produceDataList = [];
      this.getData();
    },
    showTreeFn(status) {
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.showTree = status;
    },
    initCurDepartment(id, departmentName) {
      this.change(id, departmentName);
    }
  }
};
</script>
<style lang="less" scoped>
.product-header {
  // position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 42px;
  background: #03061c;
  font-size: 16px;
  .product-header-inner {
    display: flex;
    padding-right: 20px;
    padding-left: 14px;
    align-items: center;
    height: 42px;
    color: #515a6e;
    .company-logo {
      width: 48px;
    }
    .product-header-content {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      .department_select {
        position: relative;
        min-width: 60px;
        border-radius: 2px;
        // background: #292A4D;
        transition: background 0.3s ease-in-out;
        &.active {
          background: #383a69;
        }
        .department_name {
          padding: 0 9px;
          padding-right: 26px;
          color: #fff;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .selece_icon {
          position: absolute;
          top: 50%;
          right: 2px;
          margin-top: -6px;
          color: #ffffff;
          transition: transform 0.3s ease-in-out;
          transform-origin: 50% 50%;
        }
      }
      .dep_box {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -255px;
        padding-right: 16px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
        height: 250px;
        overflow-y: scroll;
        z-index: 9999999;
        -webkit-overflow-scrolling: touch;
      }
    }
    .home {
      width: 20px;
      height: 20px;
    }
  }
}
.produce {
  color: #ffffff;
  background: #1c1f37;
  min-height: 100%;
  .produce-tab {
    display: flex;
    // position: fixed;
    z-index: 2;
    height: 44px;
    top: 40px;
    width: 100%;
    align-items: center;
    background: #22233f;
    .produce-tab-item {
      position: relative;
      width: 50%;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 14px;
      &.active {
        color: #456de6;
        background-color: initial;
        .line {
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 20px;
          height: 3px;
          background: #177fff;
        }
      }
    }
  }
  .produce-add {
    // position: fixed;
    display: flex;
    top: 84px;
    padding-right: 10px;
    width: 100%;
    height: 50px;
    z-index: 2;
    background: #1c1f37;
    justify-content: flex-end;
    align-items: center;
    .add-btn {
      width: 50px;
      height: 28px;
      font-size: 13px;
      line-height: 28px;
      border-radius: 4px;
      text-align: center;
      background: rgb(69, 109, 230);
    }
  }
}
.produce-data-list {
  padding-top: 8px;
  padding-left: 10px;
  padding-right: 10px;
  .item {
    position: relative;
    background: #292a4d;
    border-radius: 4px;
    transition: 0.3s all ease-in-out;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .top {
      font-size: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 10px;
    }
    .bottom {
      padding: 10px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 15px;
    }
    .status {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 15px;
      &.draft {
        color: #dd9710;
      }
      &.submitted {
        color: #456de6;
      }
    }
  }
  .no-data {
    padding: 10px;
    text-align: center;
    color: grey;
  }
}
.more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
</style>
